<template>
  <div>
    <van-sticky>
    <div class="back">

      <div style="width: 100%;position: absolute;">
        <van-image
          width="100%"
          height="200px"
          src='http://rf7xdyiqv.bkt.clouddn.com/bj.png'
          fit="fill"
      />
      </div>
      <van-icon name="arrow-left" style="float: left;background: rgb(192,192,192,0.5);position: absolute;margin:10px" @click="goBack"/>

    </div>

    <div>
      <van-search v-model="value" placeholder="请输入搜索关键词" label="名称" shape="round"  />

    </div>
      </van-sticky>

    <div>

      <div>

        <van-row>
          <van-col span="24">

            <van-row type="flex" justify="space-around" style="text-align: center">

              <van-col span="24" v-for="(ai_comic,index) in comic_list" style="margin-bottom: 5px">
                <router-link :to="'/comic/'+ai_comic.id">
                  <div style="width: 35%;margin: 10px;float: left">
                    <van-image
                        width="100%"
                        height="150"
                        :src="ai_comic.comic_img"
                        fit="fill"
                    />
                     <span ><van-tag color="#7232dd" plain>热播榜第{{index+1}}</van-tag></span>
                  </div>
                  <!--                        <p >{{ai_comic.name}}</p>-->
                  <div style="float: left;width: 50%;margin: 10px">
                          <span style="overflow: hidden;
                              text-overflow: ellipsis;
                              white-space: nowrap;
                              display: inline-block;
                              width: 100%;
                              text-align: left;
                              ">名称：{{ ai_comic.name }}</span>
                    <br>
                     <br>
                    <span style="overflow: hidden;
                              text-overflow: ellipsis;
                              white-space: nowrap;
                              display: inline-block;
                              width: 100%;
                              text-align: left;
                              ">年份：{{ ai_comic.comic_detail.yser }}</span>
                    <br>
                     <br>
                    <span style="overflow: hidden;
                              text-overflow: ellipsis;
                              white-space: nowrap;
                              display: inline-block;
                              width: 100%;
                              text-align: left;
                              ">角色：{{ ai_comic.comic_detail.role }}</span>
                    <br>
                     <br>
                    <span style="overflow: hidden;
                              text-overflow: ellipsis;
                              white-space: nowrap;
                              display: inline-block;
                              width: 100%;
                              text-align: left;
                              ">类型：<span v-for=" ind in ai_comic.comic_category">{{
                        type_list[ind - 1]
                      }}&nbsp;&nbsp;</span>


                    </span>

                  </div>
                </router-link>

              </van-col>


            </van-row>
            <van-row >
              <van-empty
                  class="custom-image"
                  image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
                  description="没有更多了！"
              />
            </van-row>

          </van-col>


        </van-row>


      </div>
    </div>


  </div>
</template>

<script>
export default {
  name: "SearchView",
  data() {
    return {
      value: '',
      comic_list: '',
      empty_if: false,
      type_list: ['推荐', '恋爱', '运动', '推理', '恐怖', '古风', '亲子', '科幻'],
    }
  },
  methods: {
    onSearch(val) {

    },
    goBack(){
      this.$router.back()
    }


  },
  watch: {
    async value(val, new_val) {
      if(this.value==''){
         this.$axios.get(`${this.$settings.base_url}comic/comicorder/`).then(res => {
      this.comic_list = res.data

    })
      }else {
              await this.$axios.get(`${this.$settings.base_url}comic/search/?search=${this.value}`).then(res => {
        this.comic_list = res.data

      })

      }

    },


  },
  created() {
    this.$axios.get(`${this.$settings.base_url}comic/comicorder/`).then(res => {
      this.comic_list = res.data

    })
  }
}
</script>

<style scoped>
.back {
  height: 200px;
  width: 100%;


}

.custom-image .van-empty__image {
  width: 90px;
  height: 90px;
}
</style>